<template>
  <el-form ref="ruleForm" :model="dataModel" :rules="rules" :label-position="labelPosition" label-width="96px" class="demo-ruleForm dict-form">
    <el-card shadow="never" header="基本信息">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="机构名称" prop="orgName">
              <el-input v-model="dataModel.orgName" />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="组织代码" prop="orgCode">
              <el-input v-model="dataModel.orgCode" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="税务号" prop="taxNo">
              <el-input v-model="dataModel.taxNo" />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="营业执照编号" prop="licenseNo">
              <el-input v-model="dataModel.licenseNo" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="联系方式" prop="mobile">
              <el-input v-model="dataModel.mobile" />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="dataModel.email" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="联系地址" prop="adderss">
            <el-input v-model="dataModel.adderss" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="机构简介" prop="orgIntroduce">
            <el-input v-model="dataModel.orgIntroduce" type="textarea" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="dataModel.remark" type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-card>

    <el-card header="管理员信息" shadow="never" style="margin-top: 10px;">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="账号" prop="userInfo.loginName">
              <el-input v-model="dataModel.userInfo.loginName" disabled="disabled"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="昵称" prop="userInfo.nickName">
              <el-input v-model="dataModel.userInfo.nickName" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="密码" prop="userInfo.loginPwd">
              <el-input v-model="dataModel.userInfo.loginPwd" type="password" placeholder="若需要修改密码,请填写"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="确认密码" prop="userInfo.sureLoginPwd">
              <el-input v-model="dataModel.userInfo.sureLoginPwd" type="password" placeholder="若需要修改密码,请填写"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20" v-if="appAuths.length>0">
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="应用角色">
              <el-checkbox-group v-model="dataModel.userInfo.roles">
                <el-checkbox v-for="item in appAuths" v-if="appAuths" :label="item.roleCode">
                  {{ item.roleName }}
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <el-form-item style="text-align: center;margin-top: 40px;">
      <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
      <el-button @click="$router.back(-1)">返回</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { getDataById, save } from '@/api/org/info/index'
import { getAllRoleByOrgId } from '@/api/sys/auth/role/index'

export default {
  data() {
    const validatePass = (rule, value, callback) => {
      if (this.dataModel.userInfo.loginPwd !== '') {
        if (this.dataModel.userInfo.sureLoginPwd === '') {
          callback(new Error('请再次输入密码'))
        }
        if (this.dataModel.userInfo.loginPwd !== this.dataModel.userInfo.sureLoginPwd) {
          callback(new Error('两次输入密码不一致!'))
        }
      }
      callback()
    }
    return {
      labelPosition: 'right',
      appAuths: [],
      dataModel: {
        orgName: '',
        orgCode: '',
        taxNo: '',
        licenseNo: '',
        mobile: '',
        email: '',
        adderss: '',
        orgIntroduce: '',
        remark: '',
        userInfo: {
          loginName: '',
          nickName: '',
          loginPwd: '',
          sureLoginPwd: '',
          roles: []
        }
      },
      rules: {
        orgName: [
          { required: true, message: '请输入机构名称', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ],
        orgCode: [
          { required: false, message: '请输入组织代码', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ],
        taxNo: [
          { required: false, message: '请输入税务号', trigger: 'blur' }
        ],
        licenseNo: [
          { required: false, message: '请输入营业执照编号', trigger: 'blur' }
        ],
        email: [
          { required: false, message: '请输入邮箱', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入联系方式', trigger: 'blur' }
        ],
        adderss: [
          { required: true, message: '请输入联系详细地址', trigger: 'blur' }
        ],
        remark: [
          { required: false, message: '请填输入字典条目备注', trigger: 'blur' }
        ],
        userInfo: {
          loginName: [
            { required: true, message: '请输入管理员账号', trigger: 'blur' }
          ],
          loginPwd: [
            { required: false, message: '请输入管理员密码', trigger: 'blur' }
          ],
          sureLoginPwd: [
            { validator: validatePass, trigger: 'blur' }
          ]
        }
      }
    }
  },
  created() {
    this.getAllRoleByOrgId()
    this.getData()
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          save(this.dataModel).then(() => {
            this.loading = false
            this.$router.push({ name: 'org_mgr_list'})
          }).catch(() => {
            this.loading = false
          })
        } else {
          console.log('提交失败')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    getAllRoleByOrgId() {
      getAllRoleByOrgId().then(res => {
        this.appAuths = res.data
      })
    },
    getData() {
      if (this.$route.query.id) {
        getDataById(this.$route.query.id).then((res) => {
          this.dataModel = res.data
        })
      } else {
        this.$router.push({ name: 'org_mgr_list'})
      }
    }
  }
}
</script>

<style scoped>
  .dict-form{
    padding-top: 20px;
    padding-right: 20px;
    padding-left: 20px;
  }
</style>
